<template>
    <el-card class="content" shadow="hover" style="height: 100%">
        <template #header>
            <div class="header">
                <h3>羁区羁室</h3>
            </div>
        </template>
        <el-tree
            :data="jqjsList"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
        ></el-tree>
    </el-card>
</template>

<script lang="ts" setup>
import { findJqAndJsxxList } from "@/api/main/system/system"
import { ref } from "vue"

const emit = defineEmits(["nodeClick"])
const jqjsList = ref<any>()
const defaultProps = {
    children: "data",
    label: "jshz",
}

function handleNodeClick(data: any) {
    emit("nodeClick", data)
}

//获取羁区羁室列表
findJqAndJsxxList().then((res: { status: number; data: any[] }) => {
    if (res.status == 200) {
        let all = { jsdm: "", jshz: "全部" }
        res.data.forEach((item: any) => {
            item.jsdm = item.jqdm
            item.jshz = item.jqhz
        })
        let list = res.data
        list.unshift(all)
        jqjsList.value = list
    }
})
</script>

<style lang="less" scoped>
.content {
    background-color: #fff;

    :deep(.el-tree-node__content) {
        margin-bottom: 8px;
    }

    :deep(.el-tree-node__label) {
        position: relative;
        min-width: 80px;
        background-color: #1e9fff;
        height: 30px;
        padding: 0 8px 0 5px;
        font-size: 16px;
        line-height: 30px;
        color: white;
    }

    :deep(.el-tree-node__label:hover) {
        background-color: #5fb878;
    }

    :deep(.el-tree-node__label:active) {
        background-color: #5fb878;
    }

    :deep(.el-tree-node__label::before) {
        content: "";
        position: absolute;
        z-index: -1;
        border-top: 14px solid transparent;
        border-right: 10px solid #1e9fff;
        border-bottom: 14px solid transparent;
        left: -10px;
    }

    :deep(.el-tree) {
        --el-tree-node-hover-bg-color: transparent;
    }
}

.header > h3:first-child {
    font-size: 22px;
    border-left: 5px solid #1e9fff;
    padding-left: 5px;
}

:deep(.el-card__header) {
    padding: 0 !important;
}
</style>
